import React, { Component } from 'react';
import moment from 'moment';
import { Tooltip } from 'antd';
import _ from 'lodash';
import { BaseTable, utils } from '@/components/BaseTable';

const company = '(万元：合计/房源/车位)';
export default class MonthlyIndex extends Component {
  state = {};

  buildTitleTree = () => {
    const { year } = this.props;
    const titleTree = [];
    for (let i = 1; i <= 12; i += 1) {
      let month;
      if (i < 10) {
        month = `0${i}`;
      } else {
        month = i;
      }
      const isAfter = moment(`${year}-${month}`).isAfter(moment().format('YYYY-MM'));
      titleTree.push({
        name: `${year}-${month}${isAfter ? '(无实际)' : ''}`,
        key: i,
        rowspan: 1,
        children: [
          {
            name: `${year}-${month}月初存货`,
            key: `${year}-${month}月初存货`,
            colspan: 1 * 5,
            children: this.stockChildren(isAfter, month),
          },
          {
            name: `${year}-${month}月度新供`,
            key: `${year}-${month}月度新供`,
            colspan: 1 * 7,
            children: this.newSupplyChildren(isAfter, month),
          },
          {
            name: `${year}-${month}月度综合`,
            key: `${year}-${month}月度综合`,
            colspan: 1 * 5,
            children: this.comprehensiveChildren(isAfter, month),
          },
        ],
      });
    }
    return titleTree;
  };

  buildColumns = titleTree => {
    const columns = [];
    _.forEach(titleTree, item => {
      _.forEach(item.children, x => {
        _.forEach(x.children, v => {
          columns.push({
            key: `${v.key}`,
            title: _.indexOf(v.name, '率') > -1 ? '( % )' : company,
            width: 170,
            align: 'right',
            dataGetter: ({ rowData }) => {
              const arr = _.filter(
                rowData.yearEarlyBottomList,
                value => value.name * 1 === item.key,
              );
              const text = arr.length > 0 ? arr[0][v.key.substring(2, v.key.length)] : '';
              return text;
            },
            cellRenderer: ({ rowData }) => {
              const arr = _.filter(
                rowData.yearEarlyBottomList,
                value => value.name * 1 === item.key,
              );
              const text = arr.length > 0 ? arr[0][v.key.substring(2, v.key.length)] : '';
              return (
                <Tooltip placement="topLeft" title={text}>
                  <div
                    style={{
                      width: '100%',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                      overflow: 'hidden',
                      textAlign: 'right',
                    }}
                  >
                    {text}
                  </div>
                </Tooltip>
              );
            },
          });
        });
      });
    });
    return columns;
  };

  stockChildren = (isAfter, month) => {
    const stock = [
      {
        name: '月初存货',
        key: `${month}f_monthlyInventoryAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}f_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约实际',
        key: `${month}f_signingActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约达成率',
        key: `${month}f_signingRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}f_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    const noStock = [
      {
        name: '月初存货',
        key: `${month}f_monthlyInventoryAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}f_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}f_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    return isAfter ? noStock : stock;
  };

  newSupplyChildren = (isAfter, month) => {
    const newSupply = [
      {
        name: '供货计划',
        key: `${month}g_supplyPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '供货实际',
        key: `${month}g_supplyPlanActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '供货达成率',
        key: `${month}g_supplyPlanRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}g_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约实际',
        key: `${month}g_signingActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约达成率',
        key: `${month}g_signingRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}g_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    const noNewSupply = [
      {
        name: '供货计划',
        key: `${month}g_supplyPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}g_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}g_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    return isAfter ? noNewSupply : newSupply;
  };

  comprehensiveChildren = (isAfter, month) => {
    const comprehensive = [
      {
        name: '月度可售',
        key: `${month}h_monthlyAvailableAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}h_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约实际',
        key: `${month}h_signingActualAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约达成率',
        key: `${month}h_signingRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}h_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    const noComprehensive = [
      {
        name: '月度可售',
        key: `${month}h_monthlyAvailableAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '签约计划',
        key: `${month}h_signingPlanAmount`,
        rowspan: 1,
        colspan: 1,
      },
      {
        name: '计划去化率',
        key: `${month}h_planDeChemicalRateAmount`,
        rowspan: 1,
        colspan: 1,
      },
    ];
    return isAfter ? noComprehensive : comprehensive;
  };

  render() {
    const { yearEarlyBottomList } = this.props;
    const titleTree = this.buildTitleTree();
    const columns = this.buildColumns(titleTree);
    const dataSource = [
      {
        id: '0',
        yearEarlyBottomList,
      },
    ];
    const headerRenderer = utils.getHeaderRenderer(titleTree, 3);
    return (
      <BaseTable
        expandColumnKey="name"
        fixHeight={160}
        columns={columns}
        headerHeight={[30, 30, 30, 30]}
        headerRenderer={headerRenderer}
        treeData={dataSource}
      />
    );
  }
}
